<template>
	<view class="page">
		<!-- 头部背景 -->
		<view class="head-bg" :style="   'background: url('+OSS_HOST+'img/bg_wallet.png); background-size: cover;'    ">
			<!-- <view class="" @tap="back" ></view> -->
			<view class="title" :style="'padding-top:'+pageTop+'rpx'">我的钱包</view>
		</view>
		<view class="my-wallet">
			<view class="my-wallet-box">
				<view class="box-text display-box">
					<view class="title">总资产</view>
					<view class="iconfont icon-text">&#xe67d;</view>
				</view>
				<view class="box-amount">
					{{data.info.count_balance||0}}
				</view>
				<view class="display-box margintop20">
					<view class="box-text">
						<view class="title">
							可提（元）
						</view>
						<view class="wallet">
							{{data.info.balance||0}}
						</view>
					</view>
					<view class="box-text">
						<view class="title">
							冻结（元）
						</view>
						<view class="wallet">
							{{data.info.frozen_balance||0}}
						</view>
					</view>
				</view>
			</view>
			<view class="my-wallet-detail">
				<view class="display-box my-wallet-title">
					<view class="title">
						<view>钱包明细</view>
						<view class="title-border"></view>
					</view>
					<view class="time">
						<picker mode="date"v-model="date_time"  fields="month" @change="dateChange">
						    <view class="picker">
						       {{date_time}}
						    </view>
						  </picker>
						  <span class="iconfont trand90" >&#xe671;</span>
					</view>
				</view> 
				<view class="list">
					<view class="display-box item" v-for="item,index in data.log">
						<view class="item-text">
							<view class="title">{{item.remark}}</view>
							<view class="time">{{item.create_time}}</view>
						</view>
						<view class="item-amount">
							<view>{{item.type == 2?'-':'+'}}{{item.amount}}</view>
						</view>
					</view>
					<!-- <view class="display-box item">
						<view class="item-text">
							<view class="title">一月内单笔超200元订单奖励</view>
							<view class="time">2024-9-15</view>
						</view>
						<view class="item-amount">
							<view>+30</view>
						</view>
					</view> -->
				</view>
				<view style="height:120rpx ;"></view>
			</view>
		</view>
		
		<view class="btn-tx" @tap.stop="withdrawalAuth">
			提现
		</view>
		<view class="home" @tap="toHome">
			<image :src="OSS_HOST +'img/btn-home.png'" alt="" mode="aspectFit">
		</view>
		<uni-popup ref="withdrawalModal" type="bottom" custom="true" >
				<view class="withdrawal-box">
					<view class="title">
						提现申请
					</view>
					<view class="center-box">
						<view class="item">
							<view>
								可提现金额：{{data.info.balance||0}}
							</view>
							
						</view>
						<view class="item">
							<view>
								冻结金额：{{data.info.frozen_balance||0}}
							</view>
							
						</view>
						<view class="item">
							<view>
								提现金额：
							</view>
							<view>
								<input class="u-input" type="number"  placeholder="请输入提现的金额" @blur="changeAmount()"  v-model="amount"  />
							</view>
						</view>
					</view>
					
					<view class="btn-submit" @tap="confirm" :style="'bottom:calc(32rpx + '+pageBottom+'rpx );'">
						确认
					</view>
				
				</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		oss_host
	} from '@/config/config.js';
	export default {
		data() {
			return {
				OSS_HOST: oss_host,
				pageBottom:'',//底部刘海
				pageTop:'',//头部刘海距离
				date_time:'',//当前月份
				data:{
					info:{},
					log:[],
				},
				amount:'',
			};
		},
		onLoad(e){
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res,'手机信息')
					// that.widowWidth = res.widowWidth;2
					// that.windowHeight = res.windowHeight * 2;
					// console.log(that.windowHeight,'****windowHeight*****')
					that.pageTop =res.safeAreaInsets.top>0?res.safeAreaInsets.top *2:44; //头部刘海
					that.pageBottom = res.safeAreaInsets.bottom * 2 //底部刘海
			
				}
			})
			let currentDate = new Date();
			let year = currentDate.getFullYear();
			let month = currentDate.getMonth() + 1; 
			that.date_time = year+'-'+month;
			that.getList()
			console.log(222222222)
		},
		computed: {
			//注册网络状态
			...mapGetters(['netWorkType', 'loginStatus'])
		},
		methods:{
			toHome() {
				let _this = this
				uni.switchTab({
					url: '/pages/home/home',
					success: (res) => {
						let page = getCurrentPages().pop();
						if (page == undefined || page == null) return;
						page.curSegment = 0;
						page.onLoad();
					},
				})
			},
			getList(){
				
				let _this = this
				
				let data = {
					search_time:_this.date_time
					
				}
				var opt = {
					url: '/user/balanceInfo',
					data: data,
					success: function(res) {
			
						if (res.status == 1) {
							let result = res.data
							_this.data.info = result.info
							_this.data.log = result.log
						} else {
							
						}
					}
				};
				if(_this.loginStatus){
					_this.$service.GetApi(opt);
				}
				
			},
			changeAmount(){
				let _this = this
				let maxAmount = parseInt(_this.data.info.balance)
				// console.log(maxAmount)
				if(_this.amount > maxAmount){
					_this.amount = maxAmount
					// console.log(2222222222)
				}
				if(_this.amount <0){
					_this.amount = 0
				}
				// console.log(_this.amount,maxAmount)
			},
			withdrawalAuth(){
				let _this = this 
				_this.amount = ''
				_this.$refs.withdrawalModal.open()
			},
			confirm(){
				let _this = this
				if(_this.amount<=0){
					uni.showToast({
						icon:'error',
						title:'请输入提现金额'
					})
					return ;
				}
				let data = {
					amount:_this.amount
					
				}
				var opt = {
					url: '/user/aplyWithdrawal',
					data: data,
					success: function(res) {
							
						if (res.status == 1) {
							_this.getList()
							_this.$refs.withdrawalModal.close()
						} else {
							uni.showToast({
								icon:'error',
								title:res.message
							})
						}
					}
				};
				// _this.$service.GetApi(opt);
				uni.showModal({
					title: '温馨提示',
					content: '确认提交申请提现',
					success: function (res) {
						if (res.confirm) {
							_this.$service.GetApi(opt) //网络
							// 在这里执行确定操作
						} else if (res.cancel) {
							console.log('用户点击取消');
							// 在这里执行取消操作，通常取消操作可以不写，直接不执行任何代码即可
						}
						
					}
				})
				
				
			},
			/**
			 * 消费明细点击
			 */
			onConsumeRecord(){
				uni.navigateTo({
					url: '/pages/ConsumeRecord/ConsumeRecord'
				})
			},
			dateChange(e){
				// console.log(e,1111)
				this.date_time = e.detail.value
				this.getList();
			},
			back(){
				wx.switchTab({
					url:'/pages/my/my',
					success: (res) => {
								let page = getCurrentPages().pop();
								if (page == undefined || page == null) return;
								page.curSegment = 0;
								page.onLoad();
							},
					
				})
			},
			
			
			
		}
	}
</script>

<style scoped lang="scss">
	@import 'MyWallet.scss';
</style>
